<template>
  <div
    class="flexbox flexcolumn com_box "
    v-loading="loading"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0)"
  >
    <div class="project_head flexbox flexcenter flexbetween">
        <div class="tab_title">项目列表</div>
        <div class="flexbox flexcenter">
            <el-tooltip content="任务列表" placement="top" >
                <svg @click="openTask" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" style="cursor: pointer;margin-right:10px"><path d="M9 10.5C9 9.94772 9.44772 9.5 10 9.5H22C22.5523 9.5 23 9.94772 23 10.5V24C23 24.5523 22.5523 25 22 25H10C9.44772 25 9 24.5523 9 24V10.5Z" stroke="#616C85" stroke-width="2" stroke-linecap="round" /><path d="M12 8.5C12 7.94772 12.4477 7.5 13 7.5L19 7.5C19.5523 7.5 20 7.94772 20 8.5V10.5C20 11.0523 19.5523 11.5 19 11.5H13C12.4477 11.5 12 11.0523 12 10.5V8.5Z" fill="white" stroke="#616C85" stroke-width="2" stroke-linecap="round" /><path d="M16 15V21M16 21L13.5 19M16 21L18.5 19" stroke="#616C85" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /></svg>
            </el-tooltip>
            <el-input style="width:216px;margin-right:16px" clearable size="medium" placeholder="输入项目名称查询" @change="queryInfo.page = 1,getDataList()" suffix-icon="el-icon-search" v-model="queryInfo.query">
            </el-input>
            <el-button type="primary" size="small" @click="ProjectAdd(),isEdit = false">
                <span  class="flexbox flexcenter" style="justify-content: center;gap: 4px;"> 
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M10.8333 4.79183C10.8333 4.33159 10.4602 3.9585 9.99992 3.9585C9.53968 3.9585 9.16658 4.33159 9.16658 4.79183V9.16683H4.79159C4.33135 9.16683 3.95825 9.53993 3.95825 10.0002C3.95825 10.4604 4.33135 10.8335 4.79159 10.8335H9.16658V15.2085C9.16658 15.6687 9.53968 16.0418 9.99992 16.0418C10.4602 16.0418 10.8333 15.6687 10.8333 15.2085V10.8335H15.2083C15.6685 10.8335 16.0416 10.4604 16.0416 10.0002C16.0416 9.53993 15.6685 9.16683 15.2083 9.16683H10.8333V4.79183Z" fill="white"/></svg>
                添加项目
                </span>
            </el-button>
        </div>
    </div>
    <div>
        <custom-table :data="tableData"  height="calc(-238px   + 100vh)" :queryInfo.sync="queryInfo" :total="total" @changePage="getDataList">
            <el-table-column v-for="item in tableHeader" :label="item.title" :width="item.width">
                 <template  slot-scope="scope">
                    <template  v-if="item.customRender == 'switch'">
                     <el-switch
                        v-model="scope.row[item.prop]"
                        active-color="#165DFF"
                        :active-value="1"
                        :inactive-value="0"
                        @change="changeStatus(scope.row)"
                        >
                        </el-switch>
                    </template>
                 <template v-else-if="item.customRender == 'edit'">
                   <span style="color:#165DFF;cursor:pointer" @click="editProject(scope.row),isEdit = true"> 编辑 </span> &nbsp;
                   <span style="color:#165DFF;cursor:pointer" @click="exportData(scope.row)"> 导出项目数据分析报表 </span>
                </template>
                <template v-else-if="item.customRender == 'project_level'">
                   <div>T{{scope.row[item.prop]}}</div>
                </template>
                <template v-else>
                    <div>{{ scope.row[item.prop] }}</div>
                </template>
                </template >
            </el-table-column>
        </custom-table>
    </div>
    <!-- 添加/编辑项目 -->
    <NewAddProject :drawer.sync="drawerVisible" :EditData="EditData" :isEdit="isEdit"/>
    <ExportDateNew ref="ex_ref"/>
    <ExportTaskNew ref="task_ref"/>
  </div>
</template>

<script>
import NewAddProject from "./components/NewAddProject"
import CustomTable from '@/components/components/CustomTable';
import ExportDateNew from "./ExportDateNew";
import ExportTaskNew from "./ExportTaskNew";
export default {
  name: "",
  data() {
    return {
    isEdit:false,
    EditData:undefined,
    drawerVisible:false,    
    loading: false,
    total:0,
    queryInfo:{
        page:1,
        limit:20,
        query:''
    },
      tableData: [],
      tableHeader: [ {
        title: '项目编号',
        width:"180",
        prop:'project_id',
      },{
        title: '项目名称',
        width:"280",
        prop:'project_name',
      },{
        title: '项目等级',
        width:"",
        prop:'project_level',
        customRender:'project_level'
      },{
        title: '项目状态',
        width:"180",
        prop:'project_status',
        customRender:'switch'
      },{
        title: '操作',
        width:"280",
        prop:'name',
        customRender:'edit'
      },]
    };
  },
  created() {
    this.getDataList();
  },
  methods: {
    openTask(row) {
      console.log(row)
      this.$refs.task_ref.getData();
    },
    exportData(row) {
        this.$refs.ex_ref.getData(row);
    },
    //获取列表
    async getDataList() {
      this.loading = true;
      const { data: res } = await this.$http.get(
        "adminapi/projectv2/projectList",
        {params:{  
            ...this.queryInfo

        }}
      );
      if (res.code !== 200) {
        this.loading = false;
        this.$message.error(res.msg);
        return;
      } else {
        this.loading = false;
        this.total = res.data.count;
        this.tableData = res.data.list;
      }
    },
     editProject(row){
        this.drawerVisible = true;
        this.$http.get("adminapi/projectv2/projectFind",{params:{  project_id:row.project_id,}})
        .then(res=>{
        if (res.data.code !== 200) {
             return this.$message.error(res.msg);
        } else {
            this.EditData = res.data.data;
        }
      })
    },

    async changeStatus(row){
     const { data: res } = await this.$http.get(
        "adminapi/projectv2/projectStatus",{
        params:{  
            project_id:row.project_id,
            project_status:row.project_status
        }}
      );
      if (res.code !== 200) {
         return this.$message.error(res.msg);
      } else {
            this.$message.success('操作成功')
      }
    },
    ProjectAdd(){
        this.drawerVisible = true;
        console.log(this)
    },
  },
  components:{
    CustomTable,
    NewAddProject,
    ExportDateNew,
    ExportTaskNew
  }
};
</script>


<style scoped>
/deep/ .el-button{
    padding: 0 8px;
    height: 36px;
    border-radius: 12px;
    width: 100px;
}
.project_head{
    margin-bottom: 16px;
}
.com_box{
    padding: 20px;
}
</style>